<template>
  <div ref="elEcharts" style="width: 100%; height: 100%" />
</template>

<script setup lang="ts">
import { shallowRef } from "vue"
import { useEcharts, type EChartsCoreOption } from "@/hooks/useEcharts"

interface Props {
  options: EChartsCoreOption
}
const props = defineProps<Props>()
// const themeStore = useThemeStore()
const elEcharts = shallowRef()
// eslint-disable-next-line vue/no-setup-props-destructure
const currentOptions = shallowRef(props.options)
// eslint-disable-next-line vue/no-ref-object-destructure
const { setOptions, initCharts } = useEcharts(elEcharts, currentOptions.value)

watch(
  () => props.options,
  (nVal) => {
    let targetOptions: EChartsCoreOption = {}
    // if (themeStore.currentColorArray && themeStore.currentColorArray.length > 0) {
    //   targetOptions = { ...nVal }
    //   targetOptions.color = themeStore.currentColorArray
    // } else {
    //   targetOptions = { ...nVal }
    // }
    targetOptions = { ...nVal }
    setOptions(targetOptions)
  }
)

onMounted(() => {
  initCharts()
})

</script>

<style lang="less" scoped></style>
